Table 很方便用來做資料的呈現，但是當需要在各種裝置都能正常顯示的情況下，Table 的使用就很讓人傷腦筋了。

比較常用的 Table RWD 方式有兩種：

• 破壞原本的表格排版
• 不使用 table 來製作 table

破壞原本的表格排版

就是將原本的 thead 隱藏，使用 data-* 以及將 td 用 display: block 來排版。

<table>
  <thead>
    <tr>
      <th>序號</th>
      <th>產品名稱</th>
      <th>價格</th>
      <th>產品描述</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-title="序號">A2018010001</td>
      <td data-title="產品名稱">青醬佐番茄香煎烏骨雞腿義式千層麵</td>
      <td data-title="價格">NT.250</td>
      <td data-title="產品描述">獨家青醬、美濃橙蜜香番茄、特選烏骨雞腿、手桿義式千層麵</td>
    </tr>
    <tr>
      <td data-title="序號">A2018010002</td>
      <td data-title="產品名稱">墨魚汁佐迷迭香鮮蝦干貝天使麵</td>
      <td data-title="價格">NT.280</td>
      <td data-title="產品描述">西班牙進口墨魚汁、台灣無毒蝦、北海道干貝、特選天使細麵</td>
    </tr>
  </tbody>
</table>

範例play

不使用 table 來製作 table

也就是使用 div 搭配 css 來製作表格。好處是可以有比較大的變化。下面我是使用 ul li 來製作

<ul>
  <li class="thead">
    <ol class="tr">
      <li>序號</li>
      <li>產品名稱</li>
      <li>價格</li>
      <li>產品描述</li>
    </ol>
  </li>
  <li class="tbody">
    <ol class="tr">
      <li data-title="序號">A2018010001</li>
      <li data-title="產品名稱">青醬佐番茄香煎烏骨雞腿義式千層麵</li>
      <li data-title="價格">NT.250</li>
      <li data-title="產品描述">獨家青醬、美濃橙蜜香番茄、特選烏骨雞腿、手桿義式千層麵</li>
    </ol>
    <ol class="tr">
      <li data-title="序號">A2018010002</li>
      <li data-title="產品名稱">墨魚汁佐迷迭香鮮蝦干貝天使麵</li>
      <li data-title="價格">NT.280</li>
      <li data-title="產品描述">西班牙進口墨魚汁、台灣無毒蝦、北海道干貝、特選天使細麵</li>
    </ol>
  </li>
</ul>

範例play

以上是今天的 table responsive 介紹。各位看倌明天見囉～

參考資料：
[1] https://css-tricks.com/responsive-data-tables/
[2] http://lab.25sprout.com/responsive_table/